<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>抱团</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="抱团">
    <meta name="description" content="抱团">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<style>
    html, body, .wrapperbox {
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .scrollbox {
        height: 100%;
        overflow: scroll;
    }
</style>
<body>
<div class="wrapperbox indexpage searchpage" id="app">
    <div class="scrollbox">
        <div class="searchbox">
            <h2>搜索</h2>
            <div class="search">
                <div class="input">
                    <div class="icon">
                        <i class="icon el-icon-search"></i>
                    </div>
                    <input type="search" placeholder="为您找到最优惠的商品" v-model="searchTxt" @keyup.enter="goSearch(searchTxt)">
                </div>
                <div class="clear" @click="clearSearch">取消</div>
            </div>
        </div>
        <div class="history" v-if="showHistory==true">
            <h3>搜索历史 <span class="icon" @click="openclearsHistory" v-if="searchHistory.length>0"><i
                    class="el-icon-delete"></i></span></h3>
            <div class="listbox">
                <div class="item" v-for="item in searchHistory" v-if="item!=''" @click="goSearch(item)">{{item}}</div>
            </div>
        </div>
        <div class="hotbox" v-if="serachListload==true && serachList.length>0">
            <div class="probox">
                <a :href="'./product.html?id='+item.id" class="product" v-for="(item,i) in serachList">
                    <p class="tit">本商品由{{item.merchant_name}}提供</p>
                    <div class="img">
                        <img :src="item.cover_image_url" alt="">
                        <div class="status wait" v-if="item.ongoing_status=='coming_soon'">
                            <span><i v-if="showTime[i].dd!=0">{{showTime[i].dd}}天</i>{{showTime[i].hh}}小时{{showTime[i].mm}}分钟{{showTime[i].ss}}秒</span>
                            <span>待开抢</span>
                        </div>
                        <div class="status going" v-if="item.ongoing_status=='on_sale'"><span>抢购中</span></div>
                        <div class="status goend" v-if="item.ongoing_status=='offline_soon'">
                            <span><i v-if="showTime[i].dd!=0">{{showTime[i].dd}}天</i>{{showTime[i].hh}}小时{{showTime[i].mm}}分钟{{showTime[i].ss}}秒</span>
                            <span>即将下架</span>
                        </div>
                        <div class="status" v-if="item.ongoing_status=='expired'"><span>已下架</span></div>
                    </div>
                    <div class="text">
                        <h4>{{item.title}}</h4>
                        <p>{{item.intro}}</p>
                    </div>
                    <div class="label">
                        <div class="fl">
                            <h5><em>￥</em>{{item.sale_price}}</h5>
                            <span><em>门市价：¥{{item.original_price}}</em></span>
                        </div>
                        <div class="fr">已售：{{item.sales_units}}</div>
                    </div>
                    <!--                    <div class="label">-->
                    <!--                        <div class="fl">-->
                    <!--                            <h5><em>￥</em>96.8</h5>-->
                    <!--                            <span><em>门市价：¥160</em><span>已售：120321120321</span></span>-->
                    <!--                        </div>-->
                    <!--                        <div class="ab"><img src="images/search-ab.png" alt=""><span>返</span><span class="price"><em>￥</em>35-45</span></div>-->
                    <!--                    </div>-->
                </a>
            </div>
        </div>
        <div class="emptybox" v-if="serachListload==true && serachList.length==0">
            <div class="empty">
                <div class="img"><img src="images/search-empty.png" alt=""></div>
                <p>暂无搜索结果</p>
            </div>
        </div>
        <p v-if="loading==false" class="loading">加载中...</p>
        <p v-if="has_more==false && serachList.length>10" class="loading">没有更多了</p>
    </div>
    <div class="delhistory pop">
        <div class="shadow"></div>
        <div class="wrap">
            <div class="text">
                <p>是否删除搜索记录</p>
            </div>
            <div class="btnbox">
                <div class="btn" @click="closeclearsHistory">取消</div>
                <div class="btn confirm" @click="clearsHistory">确定</div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        searchTxt: '',
        searchHistory: [],
        serachList: [],
        serachListload: false,
        showTime: [],
        getTime: null,
        page: 1,
        limit: 10,
        loading: true,
        has_more: true,
        allowclick: true,
        showHistory: true,
      }
    },
    mounted() {
      
      var that = this;
      that.init();
      that.$nextTick(function () {
        $('.scrollbox').get(0).addEventListener('scroll', function () {
          let ele = $('.scrollbox').get(0); // 获得html
          let scrollTop = ele.scrollTop; // 向上滚动的高度
          let scrollHeight = ele.scrollHeight; // 滚动内容区域总高度
          let clientHeight = ele.clientHeight; // 可见高度
          if (clientHeight + scrollTop >= scrollHeight) { // 已经滚动到底部
            if (that.loading == true && that.has_more == true) {
              that.load()
            }
          }
        })
      })
    },
    methods: {
      init: function () {
        var that = this;
        // console.log(localStorage.getItem("searchHistory"))
        if (localStorage.getItem("searchHistory") != null) {
          that.searchHistory = localStorage.searchHistory.split('&,&');
        }
      },
      getTimeList() {
        var that = this;
        that.getTime = setInterval(function () {
          var arr = [];
          var num = 0;
          for (var i in that.showTime) {
            arr.push(that.showTime[i]);
            if (that.showTime[i].time == 0) {
              num++;
            }
          }
          for (var i in arr) {
            if (arr[i].time > 0) {
              arr[i].time -= 1000;
              var dd = Math.floor(arr[i].time / 1000 / 60 / 60 / 24);
              var hh = Math.floor((arr[i].time / 1000 / 60 / 60) % 24);
              var mm = Math.floor((arr[i].time / 1000 / 60) % 60);
              var ss = Math.floor((arr[i].time / 1000) % 60);
              /*if(0<=dd && dd<10){ dd='0'+dd }else */
              if (dd < 0) {
                dd = 0
              }
              /*if(0<=hh && hh<10){ hh='0'+hh }else */
              if (hh < 0) {
                hh = 0
              }
              /*if(0<=mm && mm<10){ mm='0'+mm }else */
              if (mm < 0) {
                mm = 0
              }
              /*if(0<=ss && ss<10){ ss='0'+ss }else */
              if (ss < 0) {
                ss = 0
              }
              arr[i]["dd"] = dd;
              arr[i]["hh"] = hh;
              arr[i]["mm"] = mm;
              arr[i]["ss"] = ss;
            } else {
              arr[i]["dd"] = 0;
              arr[i]["hh"] = 0;
              arr[i]["mm"] = 0;
              arr[i]["ss"] = 0;
              if (that.serachList[i].ongoing_status == 'coming_soon') {
                that.serachList[i].ongoing_status = 'on_sale'
              }
              if (that.serachList[i].ongoing_status == 'offline_soon') {
                that.serachList[i].ongoing_status = 'expired'
              }
            }
          }
          that.showTime = arr;
        }, 1000);
      },
      goSearch: function (txt) {
        var that = this;
        if (!txt) {
          txt = that.searchTxt;
        }
        txt = String(txt);
        that.searchTxt = txt;
        if (txt.match(/^[ ]*$/)) {
          console.log("搜索内容为空");
        } else {
          sessionStorage.setItem("searchkeyword", txt);
          if (!localStorage.getItem("searchHistory")) {
            localStorage.setItem("searchHistory", txt);
            that.searchHistory.push(txt);
          } else {
            if (localStorage.getItem("searchHistory").indexOf(txt) < 0) {
              localStorage.setItem("searchHistory", localStorage.getItem("searchHistory") + '&,&' + txt);
              that.searchHistory.push(txt);
            }
          }
          that.showHistory = false;
          that.getdata(txt);
        }
      },
      clearSearch: function () {
        var that = this;
        if (that.searchTxt === '') {
          history.back()
          return;
        }
        that.searchTxt = '';
        clearInterval(that.getTime);
        that.page = 1;
        that.showTime = [];
        that.serachList = [];
        that.showHistory = true;
        that.serachListload = false;
      },
      openclearsHistory: function () {
        var that = this;
        $('.pop.delhistory').fadeIn(500);

      },
      closeclearsHistory: function () {
        var that = this;
        $('.pop.delhistory').fadeOut(500);

      },
      clearsHistory: function () {
        var that = this;
        localStorage.removeItem("searchHistory");
        that.searchHistory = [];
        $('.pop.delhistory').fadeOut(500);
      },
      getdata: function (txt) {
        var that = this;
        clearInterval(that.getTime);
        that.page = 1;
        client_get('products?keyword=' + txt + '&page=' + that.page + '&limit=' + that.limit).then(res => {
          that.has_more = res.has_more;
          that.showTime = [];
          that.serachList = [];
          if (res.list.length > 0) {
            $(res.list).each((i, v) => {
              var time = 0;
              if (v.ongoing_status == 'coming_soon') {
                v.start_time = v.start_time.replace(/-/g, '/');
                time = new Date(v.start_time).getTime() - new Date().getTime();
              } else if (v.ongoing_status == 'offline_soon') {
                v.end_time = v.end_time.replace(/-/g, '/');
                time = new Date(v.end_time).getTime() - new Date().getTime();
              }
              var dd = 0, hh = 0, mm = 0, ss = 0;
              if (time > 0) {
                dd = Math.floor(time / 1000 / 60 / 60 / 24);
                hh = Math.floor((time / 1000 / 60 / 60) % 24);
                mm = Math.floor((time / 1000 / 60) % 60);
                ss = Math.floor((time / 1000) % 60);
                /*if(0<=dd && dd<10){ dd='0'+dd }else */
                if (dd < 0) {
                  dd = 0
                }
                /*if(0<=hh && hh<10){ hh='0'+hh }else */
                if (hh < 0) {
                  hh = 0
                }
                /*if(0<=mm && mm<10){ mm='0'+mm }else */
                if (mm < 0) {
                  mm = 0
                }
                /*if(0<=ss && ss<10){ ss='0'+ss }else */
                if (ss < 0) {
                  ss = 0
                }
              }
              that.showTime.push({'time': time, 'dd': dd, 'hh': hh, 'mm': mm, 'ss': ss});
              that.serachList.push(v);
            })
            that.getTimeList();
          }
          that.serachListload = true;
        })
      },
      load() {
        var that = this;
        that.loading = false;
        that.page++;
        var txt = sessionStorage.getItem("searchkeyword");
        client_get('products?keyword=' + txt + '&page=' + that.page + '&limit=' + that.limit).then(res => {
          that.has_more = res.has_more;
          if (res.list.length > 0) {
            $(res.list).each((i, v) => {
              var time = 0;
              if (v.ongoing_status == 'coming_soon') {
                v.start_time = v.start_time.replace(/-/g, '/');
                time = new Date(v.start_time).getTime() - new Date().getTime();
              } else if (v.ongoing_status == 'offline_soon') {
                v.end_time = v.end_time.replace(/-/g, '/');
                time = new Date(v.end_time).getTime() - new Date().getTime();
              }
              var dd = 0, hh = 0, mm = 0, ss = 0;
              if (time > 0) {
                dd = Math.floor(time / 1000 / 60 / 60 / 24);
                hh = Math.floor((time / 1000 / 60 / 60) % 24);
                mm = Math.floor((time / 1000 / 60) % 60);
                ss = Math.floor((time / 1000) % 60);
                /*if(0<=dd && dd<10){ dd='0'+dd }else */
                if (dd < 0) {
                  dd = 0
                }
                /*if(0<=hh && hh<10){ hh='0'+hh }else */
                if (hh < 0) {
                  hh = 0
                }
                /*if(0<=mm && mm<10){ mm='0'+mm }else */
                if (mm < 0) {
                  mm = 0
                }
                /*if(0<=ss && ss<10){ ss='0'+ss }else */
                if (ss < 0) {
                  ss = 0
                }
              }
              that.showTime.push({'time': time, 'dd': dd, 'hh': hh, 'mm': mm, 'ss': ss});
              that.serachList.push(v);
            })
          }
          that.loading = true;
        })
      },
    }
  });
</script>
</html>